.TabGroup {
	display: flex;
	border-bottom: 4px solid var(--theme-divider);
}

.TabGroup button,
.TabGroup a {
	flex: 1;
	justify-content: center;
	white-space: nowrap;
	border-radius: 0;
	cursor: pointer;
	padding: 0.6rem 1rem;
	color: var(--theme-text-light);
	border-bottom: 4px solid transparent;
	margin-bottom: -4px;
	background-color: transparent;
	text-decoration: none;
}
.TabGroup .active,
.TabGroup [aria-selected='true'] {
	color: var(--theme-text);
	border-bottom-color: var(--theme-accent);
	font-weight: bold;
}

@media (forced-colors: active) {
	.TabGroup {
		border-bottom-color: Canvas;
	}

	.TabGroup .active {
		color: ButtonText;
		border-bottom-color: ButtonText;
	}

	.TabGroup a,
	.TabGroup button {
		color: LinkText;
		border-bottom-color: Canvas;
	}
}

.TabGroup.no-flex button,
.TabGroup.no-flex a {
	flex: 0;
}
